<template>
    <div class="login">
        <div class="content">
            <div class="center con-z2 c-flex c-row-around">
                <img width="400px" height="400px" src="../../assets/image/banner.jpg" alt="">
                <div class="login-box">
                    <div class="tit">社会服务个案管理系统平台登陆</div>
                    <a-form
                            id="formLogin"
                            class="user-layout-login"
                            ref="formLogin"
                            :form="form"
                            v-if="tab==0"
                    >
                        <a-form-item>
                            <a-input
                                    size="large"
                                    type="text"
                                    placeholder="请输入用户名"
                                    v-decorator="[
					        'username',
					        {rules: [{ required: true, message: '请输入用户名' }], validateTrigger: 'change'}
					      ]"
                            >
                                <a-icon slot="prefix" type="user" :style="{ color: 'rgba(0,0,0,.25)' }"/>
                            </a-input>
                        </a-form-item>

                        <a-form-item>
                            <a-input
                                    size="large"
                                    type="password"
                                    autocomplete="false"
                                    placeholder="请输入密码"
                                    v-decorator="[
					        'password',
					        {rules: [{ required: true, message: '请输入密码' }], validateTrigger: 'blur'}
					      ]"
                            >
                                <a-icon slot="prefix" type="lock" :style="{ color: 'rgba(0,0,0,.25)' }"/>
                            </a-input>
                        </a-form-item>

                        <a-row :gutter="16" v-if="num==3">
                            <a-col class="gutter-row" :span="16">
                                <a-form-item>
                                    <a-input
                                            size="large"
                                            type="text"
                                            placeholder="验证码"
                                            v-decorator="[
					            'captcha',
					            {rules: [{ required: true, message: '请输入验证码' }], validateTrigger: 'blur'}
					          ]"
                                    >
                                        <a-icon slot="prefix" type="key" :style="{ color: 'rgba(0,0,0,.25)' }"/>
                                    </a-input>
                                </a-form-item>
                            </a-col>
                            <a-col class="gutter-row" :span="8">
                                <!-- :src="`${baseURL}/auth/captcha?p=${captchaParam}`" -->
                                <img
                                        @click="++captchaParam"
                                        alt="验证码"
                                        style="height: 40px; cursor: pointer;">
                            </a-col>
                        </a-row>
                        <a-form-item style="margin-top:24px">
                            <!-- htmlType="submit" -->
                            <a-button
                                    size="large"
                                    type="primary"
                                    class="login-button"
                                    @click="handleSubmit"
                            >确定</a-button>
                        </a-form-item>
                    </a-form>
                    <div class="sf" v-if="tab==1" @mouseleave="isShow=''">
                        <div class="item c-flex" v-for="item in user" @mouseover="yiru(item)">
                            <div style="margin-right:24px">
                                <a-badge :count="1"><a-avatar :size="48" icon="user"/></a-badge>
                            </div>
                            <div>
                                <div style="font-weight: bold;font-size: 18px; color: #333333;">{{item}}</div>
                                <div style="color: #999999;">腾讯公益</div>
                            </div>
                            <div class="model" v-show="isShow==item">
                                <div class="model-item" @click="toDetail">某某服务档案待审核</div>
                                <div class="model-item" @click="toDetail">某某事件待处理</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="bgimg">
                <img src="../../assets/image/login_background.png" alt="">
            </div>
        </div>
        <!-- <a-skeleton /> -->
    </div>
</template>

<script>
    export default {
        data() {
            return {
                tab:0,
                num:0,
                form: this.$form.createForm(this),
                user:['督导','社工','机构管理员'],
                isShow:'',
            }
        },
        methods: {
            handleSubmit(){
                this.num++;
                if(this.num>3){
                    this.$message.success('登陆成功')
                    this.tab=1;
                }else{
                    this.$message.error(`还差${3-this.num}次成功`)
                }
            },
            yiru(item){
                console.log(item)
                this.isShow=item;
            },
            toDetail(){
                this.$message.info({
                    content:'跳转到对应页面'
                })
            }
        },
    }
</script>

<style lang="scss">
    .login{
        width: 100%;
        top:50px;
        left:0;
        right:0;
        bottom:0;
        background-color: rgb(242,242,242);
        position: absolute;
        height:calc(100vh-50px);
    }
    .center{
        width: 1200px;
        margin: 0 auto;
        height: 100%;
    }
    .logo{
        width: 200px;
    }
    .content{
        position: relative;
    }
    .bgimg{
        position: absolute;
        top: 180px;
        left: 50%;
        transform: translateX(-50%);
    }
    .con-z2{
        position: relative;
        z-index: 2;
        top: 60px;
    }
    .bgimg img{
        width: 100%;
        height: 240px;
    }
    .login-box{
        box-sizing: border-box;
        width: 400px;
        height: 400px;
        background-color: white;
        margin-top: -25px;
    }
    .tit{
        width: 100%;
        height: 50px;
        background-color: rgb(249,249,249);
        text-align: center;
        line-height: 50px;
        font-size: 20px;
        font-weight: bold;
        color: #333333;
        margin-bottom: 30px;
    }
    .user-layout-login,.sf{
        width: 300px;
        margin: 20px auto;
    }
    .sf{
        width: 300px;
        padding-bottom: 20px;
    }
    .item{
        position: relative;
        margin-bottom: 24px;
        border-bottom:1px dashed #0a2e38;
        cursor: pointer;
    }
    .model{
        width: 150px;
        // height: 300px;
        background-color: #FFFFFF;
        box-shadow: 0 0px 8px 0px rgba(10,10,10,.1);
        position: absolute;
        top: 0;
        left: -150px;
        z-index: 9;
    }
    .model-item{
        width:100%;
        height:30px;
        padding-left: 14px;
        line-height: 30px;
        text-align: left;
    }
    .model-item:hover{
        background-color: #DEDEDE;
    }
    .login-button{
        width: 100%;
    }
</style>
